<!doctype html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>导购员信息管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="__PUBLIC__/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="__PUBLIC__/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="__PUBLIC__/assets/css/admin.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
</head>

<body data-type="generalComponents">
<include file="./Public/common/htm/header.html"/>


<div class="tpl-page-container tpl-page-header-fixed" id="app">

    <include file="./Public/common/htm/menu.html"/>

    <div class="tpl-content-wrapper">
        <div class="tpl-content-page-title">
            用户管理
        </div>
        <ol class="am-breadcrumb">
            <li><a href="#" class="am-icon-home">首页</a></li>
            <li>导购员信息管理</li>
        </ol>
        <div class="tpl-portlet-components">
            <div class="portlet-title">
                <div class="caption font-green bold">
                    <span class="am-icon-code"></span> 列表
                </div>


            </div>
            <div class="tpl-block">

                <div class="am-u-sm-12 am-u-md-3" style="width: 15%; padding-right: 0px; padding-left: 5px">
                    <div class="am-form-group">
                        <select data-am-selected="{btnSize: 'sm'}" class="select" @change="search_group_salers">
                            <option value="-1">所有类别</option>
                            <option :value=group.id v-for="group in groups" :gid=group.id @click="search_group_salers">
                                {{group.group_name}}
                            </option>
                        </select>
                    </div>
                </div>

                <div class="am-u-sm-12 am-u-md-3" style="width: 15%; padding-right: 0px; ">
                    <div class="am-form-group">
                        <select data-am-selected="{btnSize: 'sm'}" class="select" @change="search_group_salers">
                            <option value="-1">所有类别</option>
                            <option :value=group.id v-for="group in groups" :gid=group.id @click="search_group_salers">
                                {{group.group_name}}
                            </option>
                        </select>
                    </div>
                </div>

                <div class="am-u-sm-12 am-u-md-3" style="width: 15%; padding-right: 0px; ">
                    <div class="am-form-group">
                        <select data-am-selected="{btnSize: 'sm'}" class="select" @change="search_group_salers">
                            <option value="-1">所有类别</option>
                            <option :value=group.id v-for="group in groups" :gid=group.id @click="search_group_salers">
                                {{group.group_name}}
                            </option>
                        </select>
                    </div>
                </div>


                <div class="am-u-sm-12 am-u-md-3">
                    <div class="am-input-group am-input-group-sm">
                        <input type="text" class="am-form-field" placeholder="查询导购员" name="search_username">
                        <span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-am-btn-success am-icon-search"
                    type="button" @click="search_salers"></button>
          </span>
                    </div>
                </div>
            </div>
            <div class="am-g">
                <div class="am-u-sm-12">
                    <form class="am-form">
                        <table class="am-table am-table-striped am-table-hover table-main">
                            <thead>
                            <tr>
                                <th class="table-id">ID</th>
                                <th class="table-title">导购员姓名</th>
                                <th class="table-type">性别</th>
                                <th class="table-author am-hide-sm-only">联系方式</th>
                                <th class="table-date am-hide-sm-only">所属区域</th>
                                <th class="table-set">操作</th>
                            </tr>
                            </thead>
                            <tbody>


                            <tr v-for="(saler,key) in salers">
                                <td>
                                    {{(current_page-1)*15+key+1}}
                                </td>
                                <td><a href="#">{{saler.name}}</a></td>

                                <td v-if="saler.sex == 0">男</td>
                                <td v-else>女</td>

                                <td class="am-hide-sm-only">{{saler.tel}}</td>
                                <td class="am-hide-sm-only">{{saler.city}}</td>
                                <td>
                                    <div class="am-btn-toolbar">
                                        <div class="am-btn-group am-btn-group-xs">
                                            <button class="am-btn am-btn-default am-btn-xs am-text-secondary"><span
                                                    class="am-icon-pencil-square-o"></span> 编辑
                                            </button>
                                            <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"
                                                    type="button"
                                                    @click="rm_user" :rid="saler.id">
                                                <span class="am-icon-trash-o"></span> 删除
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>


                            </tbody>
                        </table>
                        <div class="am-cf">

                            <div class="am-fr">
                                <ul class="am-pagination tpl-pagination">

                                    <li @click="pre_page"><a>«</a>
                                    </li>

                                    <!--<li class="am-active"><a href="#">1</a></li>-->
                                    <li v-for="i in max_page" :id="i">
                                        <a v-if="i==current_page" @click="modify_page" :page="i"
                                           style="background-color: #0e90d2">{{i}}</a>
                                        <a v-else @click="modify_page" :page="i">{{i}}</a>
                                    </li>


                                    <li><a @click="next_page">»</a></li>

                                </ul>
                            </div>
                        </div>
                        <hr>

                    </form>
                </div>

            </div>
        </div>
        <div class="tpl-alert"></div>

    </div>


</div>

</div>
</body>


<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/assets/js/app.js"></script>
<script src="__PUBLIC__/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            salers: [],
            groups: [],
            max_page: 0,
            current_page: 1,
            gid: -1,
        },
        methods: {
            load_salers: function (page) {
                var username = document.getElementsByName('search_username');
                username = username[0].value;
                $.ajax({
                    type: 'get',
                    url: '../AdminApi/get_saler_list',
                    dataType: 'json',
                    data: {
                        page: page,
                        user_name: username,
                    },
                    success: function (data) {
                        if (data.stateCode == 200) {
                            vm.salers = data.data.salers;
                            vm.max_page = data.data.max_page;
                            vm.current_page = page;
                        }
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
            },
            load_groups: function (gid) {
                $.ajax({
                    type: 'get',
                    url: '../AdminApi/get_group_list',
                    dataType: 'json',
                    data: {
                        gid: gid,
                    },
                    success: function (data) {
                        if (data.stateCode == 200) {
                            vm.groups = data.data;
                        }
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
            },
            modify_page: function (event) {
                var tarView = event.target;
                var page = tarView.getAttribute('page');
                this.load_salers(page);
            },
            pre_page: function (event) {
                var pre_page = this.current_page - 1;
                if (pre_page > 0) {
                    this.load_salers(pre_page);
                }
            },
            next_page: function (event) {
                //利用 -0 转化为数字 再进行翻页操作
                var next_page = this.current_page - 0 + 1;
                if (next_page <= this.max_page) {
                    this.load_salers(next_page);
                }
            },
            rm_user: function (event) {
                var tarView = event.target;
                var uid = tarView.getAttribute('rid');
                $.ajax({
                    type: 'delete',
                    url: '../AdminApi/delete_user?uid=' + uid,
                    dataType: 'json',
                    data: {},
                    success: function (data) {
                        vm.load_salers(vm.current_page);
                    },
                    error: function (data) {
                        console.log('error');
                    }
                })
            },
            search_salers: function (event) {
                vm.load_salers(1);
            },
            search_group_salers: function (event) {
                var tarView = event.target;
                vm.gid = tarView.value;
                this.load_salers(1);
            }
        },
    })

    $(document).ready(function () {
        vm.load_salers(vm.current_page);
        vm.load_groups();

        $('.select').on('change', function (event, params) {
            vm.search_group_salers(event);
        });
    })

</script>


</html>